<!--
 * @Author: your name
 * @Date: 2021-08-06 15:38:27
 * @LastEditTime: 2021-08-20 20:08:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \系统学习\VueProject\vue02\tabbar\src\views\cart\Cart.vue
-->
<template>
    <div class="cart">
        <!-- 导航 -->
        <nav-bar class="nav-bar">
            <div slot="center">购物车({{cartLength}})</div>
        </nav-bar>
        <!-- 商品的列表 -->
        <cart-list />
        <!-- 底部汇总 -->
        <cart-bottom-bar />
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import CartList from './childComps/CartList.vue'
import CartBottomBar from './childComps/CartBottomBar.vue'
import {mapGetters} from 'vuex'
export default {
    name:'Cart',
    components:{
        NavBar,
        CartList,
        CartBottomBar
    },
    computed:{
        ...mapGetters(['cartLength'])
    }
}
</script>

<style scoped>
    .cart{
        height: 100vh;
    }
    .nav-bar{
        background-color:var(--color-tint);
        color:#fff;
    }
</style>
